<template>
  <div class="container">
    <el-card>
      <div slot="header" class="clearfix">
        <strong style="font-size: 20px;margin-left: 1%">我学的课</strong>
        <el-button style="width: 10%;float: right;margin-right: 5%" type="primary" @click="dialogFormVisible = true"> <i class="el-icon-plus" style="margin-right: 1%"></i>绑定课程</el-button>
      </div>
      <el-dialog title="课程" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="绑定码" :label-width="formLabelWidth">
            <el-input v-model="form.flag" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
      <el-row :gutter="20">
        <el-col :span="6" v-for="(info,index) in courses " :key="info.id">
          <div style="margin-top: 4%; width: 90%" @click="gotoList(info.courseId)">
            <el-card :body-style="{ padding: '0px' }">
              <img src="../../assets/img/home/course.jpg" class="image">
              <div style="padding: 14px;">
                <h3>{{info.title}}</h3>
                <div class="tex">{{info.periodStart}}-{{info.periodEnd}} 节</div>
                <div class="tex">{{info.startTime}}-{{info.endTime}}</div>
                <div class="tex">{{info.name}}</div>
                <div class="tex">{{info.institute}}</div>
                <div class="tex">班级名称: {{info.className}}</div>
                <div class="bottom clearfix">
                  <el-button type="text" class="button" @click.stop="deleteStudentCourse(info.id)">解绑</el-button>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <div style="margin-top: 26px">
        <el-pagination
            background
            layout="total,prev,pager,next"
            :page-size="8"
            :total="size"
            @current-change="handleCurrentChange"
            @pre-click="handlePrev"
            @next-click="handleNext">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>

import {addStudentCourse, deleteStudentCourse, getAllStudentCourse} from "../../network/Details/course";
export default {
  name: "MyCourse",
  data(){
    return {
      show:false,
      curIndex:-1,
      size:0,
      courses:[],
      curPage: 1,
      inputContent:'',
      username: window.sessionStorage.getItem("username"),
      options: [{
        value: 1,
        label: 1
      }, {
        value: 2,
        label: 2
      }, {
        value: 3,
        label: 3
      }, {
        value: 4,
        label: 4
      }, {
        value: 5,
        label: 5
      },
        {
          value: 6,
          label: 6
        },
        {
          value: 7,
          label: 7
        }],
      dialogFormVisible: false,
      courseTime:[],
      form: {
        flag: '',
        username: window.sessionStorage.getItem("username")
      },
      formLabelWidth: '120px',
    }
  },
  methods: {
    submit(){
      this.dialogFormVisible = false
      addStudentCourse(this.form, 'post').then(res => {
        this.getAll(this.curPage)
        this.$message({
          type: 'success',
          message: '绑定成功!'
        });
      });
    },
    deleteStudentCourse(id){
      deleteStudentCourse(id).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getAll(1)
      })
    },
    handleCurrentChange(val) {
      this.curPage = val;
      this.getAll(val)
    },
    gotoList(id) {
      this.$router.push({
        name:"CourseInfo",
        query:{
          id:id
        }
      })
    },
    handlePrev(val){
      this.getAll(val)
    },
    handleNext(val){
      this.getAll(val)
    },
    getAll(page){
      getAllStudentCourse(page, 8, window.sessionStorage.getItem("username")).then(res=>{
        console.log(res.data)
        this.size = res.data.total
        this.courses = res.data.records
      })
    }
  },
  created() {
    this.getAll(1)
  }

}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 80%;
  height: 200px;
  margin-top: 6%;
  border-radius: 10px;
  background: url("../../assets/img/home/course.jpg");
  background-size: auto 100%;

}
.e-icon{
  float: right;
}
.el-icon-edit:hover,.el-icon-delete-solid:hover {
  color: #409EFF;
}
.text{
  font-size: 20px;
}
.text:hover{
  color: #409EFF;
}
.box-card:hover{
  transform: translateY(-8px);
  transition: transform 0.2s;
}
.container{
  margin-top: 2%;
  max-width: 100%;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.tex{
  font-size: 13px;
  color: #C0C4CC;
}
.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
